<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
    <meta charset="UTF-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
		<title>Detalles</title>
		<link rel="shortcut icon" href="../favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/default.css"/>
                <link rel="stylesheet" type="text/css" href="css/component.css"/>
                <link rel="stylesheet" type="text/css" href="css/panel.css"/>
                <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
                <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'/>
		<script src="js/modernizr.custom.js"></script>
                <script src="http://maps.google.com/maps/api/js?sensor=false"
                        type="text/javascript"></script>
    </h:head>
    <h:body class="cbp-spmenu-push">
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
                <h3>BirrApp</h3>
                <a href="ok.xhtml" id="inicio">Inicio</a>
                <a href="buscar.xhtml" id="buscar" onclick="menuItem('buscar');">Buscar</a>
                <a href="favoritos.xhtml" id="favoritos" onclick="menuItem('favoritos');">Favoritos</a>
                <a href="perfil.xhtml" id="perfil" onclick="menuItem('perfil');">Perfil</a>
                <h:form> 
                    <h:commandLink action="#{endSessionManagedBean.disconect()}" value="Desconectar"/>
                </h:form>

        </nav>
        <div class="container" >
            
            <div class="main" id="frame">  
                <p:messages id="messages" showDetail="false" autoUpdate="true"/> 
                <f:event type="preRenderView" listener="#{detalleManagedBean.compruebaUbicacion}" />
                <h1>Detalles</h1>
                
                <p:fieldset legend="#{detalleManagedBean.bar.nombre}">
                    <h:panelGrid id="tablaDatosPadre" columns="3" cellpadding="10" columnClasses="barList11, barList14">   
                        
                        <h:panelGrid columns="1">  
                            <p:graphicImage id="barImagen" styleClass="imageBarDetalle" 
                                            value="#{detalleManagedBean.fotoBar}"/>  
                            <p:commandLink id="openDialogLink" value="Ampliar" onclick="barImage.show();"/> 
                            <p:dialog widgetVar="barImage" showEffect="clip" 
                                      hideEffect="clip" modal="true" resizable="false">
                                <p:graphicImage id="barImg"
                                                value="#{detalleManagedBean.fotoBar}" height="480" width="640"/>
                                 
                             </p:dialog>
                        </h:panelGrid>  
                        
                        <h:panelGrid id="tablaDatos" columns="2" cellpadding="5">   
                            <h:outputText value="Nombre: " styleClass="letrasNegrita"/>
                            <h:outputText value="#{detalleManagedBean.bar.nombre}"/>

                            <h:outputText value="Dirección: " styleClass="letrasNegrita"/>
                            <h:outputText value="#{detalleManagedBean.bar.direccion}"/> 

                            <h:outputText value="Código Postal: " styleClass="letrasNegrita"/>
                            <h:outputText value="#{detalleManagedBean.bar.codigoPostal}"/> 

                            <h:outputText value="Teléfono: " styleClass="letrasNegrita"
                                          rendered="#{detalleManagedBean.isTelefono}"/>
                            <h:outputText value="#{detalleManagedBean.bar.telefono}"
                                          rendered="#{detalleManagedBean.isTelefono}"/> 
                            
                            <h:form id="formMap">    
                                <p:commandButton id="openDialogLink" value="Ver mapa" onclick="map.show()"
                                                 disabled="#{detalleManagedBean.bar.latitud == null}"/> 
                                
                                <p:dialog id="picture" widgetVar="map" header="Ubicación #{detalleManagedBean.bar.nombre}" width="800" height="500"  
                                          showEffect="clip" hideEffect="clip" modal="true" resizable="false">  
                                    <p:gmap id ="mapa" zoom="16" type="HYBRID" center="#{detalleManagedBean.centerLatitude},#{detalleManagedBean.centerLongitude}" 
                                            model="#{detalleManagedBean.advancedModel}" style="width:100%;height:100%">  
                                        <p:ajax event="overlaySelect" listener="#{detalleManagedBean.onMarkerSelect}" />  
                                        <p:gmapInfoWindow>  
                                            <p:outputPanel style="text-align:center;display:block;margin:auto:">  
                                                    <p:graphicImage value="#{detalleManagedBean.marker.data}" styleClass="imageBarDetalle"/>  
                                                    <br />  
                                                    <h:outputText value="#{detalleManagedBean.marker.title}" />  
                                            </p:outputPanel>  
                                        </p:gmapInfoWindow>  
                                    </p:gmap>
                                </p:dialog>
                            </h:form> 
                            
                            <h:form id="formFavoritos">
                                <p:commandButton value="Favoritos" action="#{detalleManagedBean.anadirBarFavoritos}">

                                </p:commandButton>
                            </h:form>
                        </h:panelGrid>     
                 </h:panelGrid> 
                </p:fieldset>
                <div id="botontesComentar" style="padding-left: 720px;">
                    <a href="https://twitter.com/share" class="twitter-share-button"
                       data-text="#{detalleManagedBean.mensajeSocial}" data-lang="es">Twittear</a>
                        <script>
                            !function(d,s,id)
                            {
                                var js,fjs=d.getElementsByTagName(s)[0],
                                    p=/^http:/.test(d.location)?'http':'https';
                                if(!d.getElementById(id))
                                {
                                    js=d.createElement(s);
                                    js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
                                    fjs.parentNode.insertBefore(js,fjs);
                                }
                            }
                            (document, 'script', 'twitter-wjs');
                        </script>
                        <a href="javascript: void(0);"
                           onclick="window.open('http://www.facebook.com/sharer/sharer.php?s=100&amp;p[url]=www.birrapp.es&amp;p[title]=BirrApp&amp;p[summary]=BirrApp',
                                                'ventanacompartir', 'toolbar=0, status=0, width=650, height=450');">
                            <p:graphicImage value="/images/icons/facebook-ico.jpeg" style="width: 20px; height: 20px;"/>
                        </a>
                    </div> 
                <p:fieldset legend="Cervezas">
                    <p:dataTable id="dataTableBarContenido" var="barContenido" 
                                 value="#{detalleManagedBean.listaCervezas}" 
                                 styleClass="listasCervezasTabla" paginator="true" rows="5" paginatorAlwaysVisible="false"
                                 rowStyleClass="#{barContenido.precio eq detalleManagedBean.getcervezaMasBarataEnBar(barContenido) ? 'colorRowMasBarata' : null}" >
                       <p:column headerText="Marca" styleClass="barList21">  
                           <h:outputText value="#{barContenido.cervezasT.marca}"/>  
                       </p:column>

                       <p:column headerText="Tipo" styleClass="barList22">  
                           <h:outputText value="#{barContenido.cervezasT.tipo}" />  
                       </p:column>  

                       <p:column headerText="Vaso" styleClass="barList23">  
                           <h:outputText value="#{barContenido.vasosT.tipo}" />  
                       </p:column>  

                       <p:column headerText="Precio" styleClass="barList24">  
                           <h:outputText value="#{barContenido.precio} €" />  
                       </p:column>  

                       <p:column headerText="Tapa"  styleClass="barList25">  
                           <h:outputText value="#{barContenido.tapasCervezaT.nombre}" />  
                       </p:column> 
                   </p:dataTable>
                </p:fieldset>
                <p:fieldset legend="Ofertas">
                    <p:dataTable id="dataTableBarOfertas" var="oferta" 
                                 value="#{detalleManagedBean.bar.ofertasTCollection}" 
                                 styleClass="listasCervezasTabla" paginator="true" rows="5" paginatorAlwaysVisible="false" emptyMessage="No dispone de ofertas">
                       <p:column headerText="Descripción" styleClass="barList21" >  
                           <h:outputText value="#{oferta.descripcion}"/>  
                       </p:column>
                   </p:dataTable>
                </p:fieldset>
            </div>
        </div>
        <script src="js/classie.js"></script>
        <script src="js/menu.js"></script>
    </h:body>
</html>
